<template>
  <div class="address-bg">
    <el-card class="address-card">
      <div class="address-title">我的地址管理</div>
      <el-divider />
      <div class="address-actions">
        <el-button type="primary" @click="onAddAddress">新增地址</el-button>
        <el-button @click="goMy">返回</el-button>
      </div>
      <el-table :data="addressList" style="margin-top: 20px;">
        <el-table-column prop="province" label="省份" />
        <el-table-column prop="city" label="城市" />
        <el-table-column prop="district" label="区" />
        <el-table-column prop="detail_address" label="详细地址" />
        <el-table-column prop="phone" label="电话号码" />
        <el-table-column prop="address_type" label="地址类型">
          <template #default="scope">
            {{ scope.row.address_type === 0 ? '家' : scope.row.address_type === 1 ? '公司' : '其他' }}
          </template>
        </el-table-column>
        <el-table-column prop="is_default" label="默认">
          <template #default="scope">
            {{ scope.row.is_default === 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="editAddress(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteAddress(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <div>
    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="showAddDialog" title="地址信息">
        <el-form :model="editForm" label-width="80px">
          <el-form-item label="省份"><el-input v-model="editForm.province" /></el-form-item>
          <el-form-item label="城市"><el-input v-model="editForm.city" /></el-form-item>
          <el-form-item label="区"><el-input v-model="editForm.district" /></el-form-item>
          
          <el-form-item label="详细地址"><el-input v-model="editForm.detail_address" /></el-form-item>
          <el-form-item label="电话号码"><el-input v-model="editForm.phone" /></el-form-item>
          <el-form-item label="地址类型">
            <el-select v-model="editForm.address_type" placeholder="请选择地址类型">
              <el-option label="家" :value="0" />
              <el-option label="公司" :value="1" />
              <el-option label="其他" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="默认地址">
            <el-radio-group v-model="editForm.is_default">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="saveAddress">保存</el-button>
        </template>
      </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { http } from '@/utils/request'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const addressList = ref([])
const showAddDialog = ref(false)
const editForm = ref({ id: null, province: '', city: '', district: '', detail_address: '', phone: '', address_type: 0, is_default: 0 ,user_id:null})


function fetchAddresses() {
  http.get('/login/addresses/').then(res => {
    addressList.value = res.data.data
  })
}
function editAddress(row) {
  editForm.value = {
    id: row.id,
    province: row.province,
    city: row.city,
    district: row.district,
    detail_address: row.detail_address,
    phone: row.phone || '',
    address_type: row.address_type ?? 0,
    is_default: row.is_default ?? 0,
    user_id: row.user_id || localStorage.getItem('userid')
  }
  showAddDialog.value = true
}
function saveAddress() {
  if (editForm.value.id) {
    http.put(`/login/addresses/${editForm.value.id}/`, editForm.value).then(() => {
      ElMessage.success('修改成功')
      showAddDialog.value = false
      fetchAddresses()
    })
  } else {
    http.post('/login/addresses/', editForm.value).then(() => {
      ElMessage.success('添加成功')
      showAddDialog.value = false
      fetchAddresses()
    })
  }
}
function deleteAddress(id) {
  http.delete(`/login/addresses/${id}/`).then(() => {
    ElMessage.success('删除成功')
    fetchAddresses()
  })
}
function onAddAddress() {
  editForm.value = { id: null, province: '', city: '', district: '', detail_address: '', phone: '', address_type: null, is_default: null ,user_id:localStorage.getItem('userid')}
  showAddDialog.value = true
}
function goMy() {
  router.push('/').then(() => {
    window.location.reload();
  });
}
onMounted(fetchAddresses)
</script>

<style scoped>
.address-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #fff 60%, #ffe5cc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.address-card {
  width: 800px;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(34,34,34,0.08);
  padding: 32px 36px 24px 36px;
}
.address-title {
  font-size: 26px;
  font-weight: bold;
  color: #222;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.address-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
</style> 